<template>
	<scroll-view scroll-y scroll-with-animation class="container" >
		<cu-bar2 bgColor="bg-menu" :isBack="false" @onleft="onNoticeMsg">
			<block slot="left"><text class="cuIcon-noticefill text-white"></text></block>
			<block slot="content" class="page-name text-white">我的</block>
		</cu-bar2>
		<view  class="contents-tabar" :style="{ height: winheight+'px' }">
			<view class="arc bg-menu">
				<view class="flex solid-bottom padding align-center" @click="onUser">
					<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
					<view class="margin-left">
						<view class="cu-user-name">李星</view>
						<view class="cu-user-phone">132****8096</view>
					</view>
				</view>
			</view>

			<view class="menu-boxs padding">
				<view >
					<view class="boxs-radius" @click="toPage" data-url="./wallet/wallet">
						<view class="flex justify-between padding">
							<view class="text-size-34">我的资产</view>
							<view class="cuIcon-right"></view>
						</view>
						<view class="flex justify-between padding">
							<view class="align-start">
								<view class="text-red-rich text-size-40">1324.00</view>
								<view class="text-gray text-size-26">账户余额（元）</view>
							</view>
							<view class="flex align-end margin-top-sm">
								<text class="text-gray text-size-26">累计收益：</text>
								<text class="text-black text-size-26">1325.00元</text>
							</view>
						</view>
					</view>
					<view class="boxs-radius margin-top">
						<cu-cell-between label="order" icon="order" :top="false" title="订单管理" @onclick="onClickCell"></cu-cell-between>
						<cu-cell-between label="live" icon="video" :top="false" title="我要直播" @onclick="onClickCell"></cu-cell-between>
						<cu-cell-between label="records" icon="text" :top="false" title="直播历史" @onclick="onClickCell"></cu-cell-between>
						<cu-cell-between label="shop" icon="shop" :top="false" title="我的店铺" @onclick="onClickCell"></cu-cell-between>
						<cu-cell-between :bottom="false" label="identity" icon="news" :top="false" title="实名认证" @onclick="onClickCell"></cu-cell-between>
					</view>
					<view class="boxs-radius margin-top"><cu-cell-between :bottom="false" label="call" icon="comment" :top="false" title="联系我们" @onclick="onClickCell"></cu-cell-between></view>
					<cu-more :title="loadMoreText"></cu-more>
				</view>
				
			</view>
		</view>  
		
		<!--  -->
		<tabbar isBottom="true" :selectIndex="3" @onswitch="onSwitch"></tabbar>
	</scroll-view>
</template>

<script>
import cuCellBetween from '../../components/single/cell/cu-cell-between.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['hasLogin', 'userinfo', 'inviter']),
	components: {
		cuCellBetween
	},
	data() {
		return {
			pageNo: 1,
			pageSize: 20,
			loadMoreText: 'xx商城',
			total: 0,
			winheight: this.ScreenHeight,
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			shop: []
		};
	},
	onLoad: function(prop) {
		console.log();
	},
	onShow() {
		this.pageNo = 1;
		console.log(this.islive);
		//this.onInit(0);
	}, //下拉刷新
	onPullDownRefresh: function() {
		var that = this;
		this.loadMoreText = '';
		this.pageNo = 1;
		setTimeout(function() {
			that.onInit(1);
		}, 500);
	}, //上拉加载更多
	onReachBottom() {
		this.pageNo++;
		if (this.pageNo > this.total) {
			this.loadMoreText = '没有更多数据了!';
			return;
		}
		setTimeout(() => {
			this.onInit();
		}, 500);
	}, //分享页面
	onShareAppMessage: function(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		let params = 'token=' + this.userinfo.uid;
		return this.util.getSharePage(params);
	},
	methods: {
		...mapMutations(['setinviter']),
		onNoticeMsg: function() {
			this.util.showAlert("没有通知信息");
		},
		onUser: function() {
			if (this.hasLogin) {
				this.util.showAlert("查看用户");
			} else {
				this.util.showAlert("登录账户");
			}
		},
		onInit: function(type) {
			let that = this;
			this.$controller.onHome(this.pageNo, this.$store.state, type, function(data, error, msg) {
				console.log(data);
				if (error == 0) {
					that.total = data.total;
					if (that.pageNo == 1) {
						that.shop = data.shop;
					} else {
						that.shop = that.shop.concat(data.shop);
					}
				}
			});
		},
		toPage: function(e) {
			let url = e.currentTarget.dataset.url;
			if (!url) {
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		onSwitch(e) {
			switch (parseInt(e)) {
				case 0:
					uni.redirectTo({
						url: '../home/home'
					});
					break;
				case 1:
					uni.redirectTo({
						url: '../shops/shop'
					});
					break;
				case 2:
					uni.redirectTo({
						url: '../shopcar/shopcar'
					});
					break;
			}
		},
		onClickCell: function(e) {
			this.util.showAlert(e)
		}
	}
};
</script>

<style scoped>
.contents-tabar {
	background: rgba(241, 241, 242, 1);
	position: relative;
	margin-bottom: 0px;
}

.arc {
	border-radius: 0upx 0upx 400upx 160upx;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(0deg);
	height: 310upx;
	
}

.menu-boxs {
	position: absolute;
	top: 180upx;
	left: 0;
	right: 0;
}

.cu-user-name {
	font-size: 36upx;
	font-family: PingFang;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
	line-height: 36upx;
}

.cu-user-phone {
	font-size: 28upx;
	font-family: PingFang;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	line-height: 36upx;
}

.cu-avatar {
	width: 120upx;
	height: 120upx;
}
.cuIcon-noticefill {
	font-size: 44upx;
}
</style>
